<template>
  <div class="agreement" ref="contract" :class="{ readonly: contractPic }">
    <template v-if="loaded && !contractPic">
      <div class="title">{{ title }}</div>
      <div class="companyinfo">
        <div>甲&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;方：</div>
        <div>{{ aName }}</div>
      </div>
      <div class="companyinfo">
        <div>乙&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;方：</div>
        <div :class="{ warn: !user.truename }">
          {{ user.truename || "【未提交】" }}
        </div>
      </div>
      <div class="companyinfo">
        <div>身份证号：</div>
        <div :class="{ warn: !user.idcard }">
          {{ user.idcard || "【未提交】" }}
        </div>
      </div>
      <div class="content">
        <div>
          甲乙双方就乙方购买理财课程事项，在平等互利的基础上，遵循诚实守信的原则，通过友好协商达成如下协议。
        </div>
        <div>
          1、甲方保证其销售课程是自行研发、制作的，版权属于甲方所有的非侵权课程。
        </div>
        <div>2、甲方提供相关课程内容、学习安排和计划，并辅导学员进行学习。</div>
        <div>
          3、甲方产品本身质量问题所引起的故障，甲方应对其进行维护并修正。
        </div>
        <div>
          4、甲方为乙方提供主要服务内容为网络课程等线上资源，课程为虚拟内容服务，一经购买成功，乙方不可转让或要求甲方退费（除符合本协议第7条第①种情况）。
        </div>
        <div>
          5、乙方不得复制、翻录、传播、解密和修改甲方提供的课程视频、讲义等课程內容，也不得将已获得的课程视频、讲义等课程内容再进行转让、允许他人使用、自己商业使用等侵犯甲方版权的行为，否则一经查实，甲方有权终止本合同，并依法追究乙方的法律责任，同时不予退还乙方已缴课程费用
        </div>
        <div>
          6、课程分为财务自由基础课和专业课，明细如下：
          <div class="box">
            <div class="item">
              <div>课程名称</div>
              <div>课程价格</div>
            </div>
            <div class="item" v-if="type.includes(9)">
              <div>
                《财务自由工具操作技能课》+《财务自由财报分析技能课》+《财务自由企业分析技能课》
              </div>
              <div>
                <!-- <van-icon :name="type.includes(9) ? 'passed' : 'circle'" class="icon" /> -->
                5998元
              </div>
            </div>
            <div class="item" v-if="type.includes(2)">
              <div>《财务自由工具操作技能课》</div>
              <div>
                <!-- <van-icon :name="type.includes(2) ? 'passed' : 'circle'" class="icon" /> -->
                1998元
              </div>
            </div>
            <div class="item" v-if="type.includes(3)">
              <div>《财务自由工具操作技能课》+《财务自由财报分析技能课》</div>
              <div>
                <!-- <van-icon :name="type.includes(3) ? 'passed' : 'circle'" class="icon" /> -->
                3998元
              </div>
            </div>
            <div class="item" v-if="type.includes(4)">
              <div>《财务自由工具操作技能课》+《财务自由企业分析技能课》</div>
              <div>
                <!-- <van-icon :name="type.includes(4) ? 'passed' : 'circle'" class="icon" /> -->
                3998元
              </div>
            </div>
          </div>
          全套课程费用以微信、支付宝或转账方式汇入公司
        </div>
        <div>
          7、甲方承诺①学员学完24周全套课程且获得甲方颁发的毕
          业证2日内，如认为课程价值低于价格，可全额退费;②如若学
          习过程中，未达到学习效果，可在新班级重复学习。
          注:乙方未在上述期限内申请退费则视为乙方放弃退费申
        </div>
        <div>
          8、甲、乙双方均不得将合同的内容及在本合同执行过程中获
          得对方的商业信息向任何第三方泄漏、允许、提供他人使
        </div>
        <div>
          9、购买本合同课程，请遵守本合同规则。本合同是双方关于
          课程服务等相关事宜的完整协议，并取代双方先前的或现在
          的所有陈述、建议、讨论和通讯，无论是口头的还是书面
          的。如双方关于购买课程等相关事宜的沟通或陈述与本合同
          不一致，以本合同约定为准
        </div>
        <div>
          10、乙方填写的本合同首部个人资料用于甲方确认乙方合法
          学员身份、向乙方发送本合同正式签署文本、课程资料及相
          关信息、发送发票，是双方有效沟通的前提和保障
        </div>
        <div>
          11、自乙方购买课程付费开始，视为自动同意本合同内容
          本合同从乙方付费日起正式生效。
        </div>
        <div>
          12、双方在合同履行过程中如发生任何争议，应友好协商解
          决，如协商不成可将争议提交至北京仲裁委员会仲裁解决。
        </div>
      </div>
      <div class="sign-wrapper">
        <div class="zhang">
          <div>甲方：（盖章）</div>
          <div>日期：{{ aDate }}</div>
        </div>
        <div class="zhang">
          <div>
            乙方：
            <span
              class="sign-btn"
              v-if="!signImg && btnShow"
              @click="isSignPannelShow = true"
              >点击此处签名</span
            >
          </div>
          <div>日期：{{ bDate }}</div>
          <img class="sign-img" v-if="signImg" :src="signImg" />
          <span
            class="resign-btn"
            v-if="signImg && btnShow"
            @click="isSignPannelShow = true"
            >点击此处重新签名</span
          >
        </div>
        <div class="submit-btn" v-if="btnShow" @click="contractSubmit">
          提交
        </div>
      </div>

      <div class="sign-pannel" v-if="isSignPannelShow">
        <div class="sign-header">请在下面区域内签名</div>
        <div class="sign-apnnel-container">
          <vue-esign
            ref="esign"
            :lineWidth="8"
            :isCrop="true"
            :width="690"
            :height="300"
            line-color="#000"
            bg-color=""
          />
        </div>
        <div class="btn-row">
          <div class="btn-confirm" @click="signConfirm">确定</div>
          <div class="btn-cancel" @click="signCancel">取消</div>
        </div>
      </div>
      <transition name="fade">
        <div class="sign-pannel-mask" v-show="isSignPannelShow"></div>
      </transition>
    </template>
    <template v-if="loaded && contractPic">
      <img :src="contractPic" class="contract-img" />
    </template>
  </div>
</template>

<script>
import {getContract, uploadContract, getCourses} from '@/assets/js/api';
import html2canvas from 'html2canvas';
import moment from 'moment';

export default {
  data() {
    return {
      userId: localStorage.userId,
      user: {},
      title: '课程服务合同',
      aName: '北京钱多多财商教育科技集团有限公司',
      aDate: moment().format('YYYY-M-D'),
      bDate: moment().format('YYYY-M-D'),
      type: [],
      isSignPannelShow: false,
      signImg: '',
      loaded: false,
      btnShow: true,
      contractPic: ''
    };
  },
  methods: {
    signConfirm() {
      this.$refs.esign.generate().then(res => {
        this.signImg = res;
        this.isSignPannelShow = false;
      }).catch(() => {
        this.$toast('请签名之后再点确定');
      });
    },
    signCancel() {
      this.isSignPannelShow = false;
    },
    contractSubmit() {
      if (!this.user.idcard || !this.user.truename) {
        this.$toast('请先去完善身份信息再提交合同');
        return;
      }
      if (!this.signImg) {
        this.$toast('请签名之后再提交');
        return;
      }
      this.btnShow = false;
      this.$nextTick(() => {
        html2canvas(this.$refs.contract, {}).then(canvas => {
          canvas.toBlob((blob) => {
            let formData = new FormData(),
              file = new File(
                [blob],
                'contract.png',
                { type: blob.type }
              );

            formData.append('attachment', file);
            uploadContract(
              this.userId,
              formData
            ).then(data => {
              this.$toast('合同提交成功');
            });
          });
          // this.loaded = false;
          // this.contractPic = canvas.toDataURL('image/png');
        });
      });
    }
  },
  mounted() {
    try {
      this.user = JSON.parse(localStorage.userInfo);
    } catch (e) {
      console.log(e);
      // this.$toast('登录超时，请重新登录');
      this.$router.push({name: 'mine'});
    }

    getContract(this.userId).then(data => {
      if (data) {
        this.contractPic = '//' + data;
        this.loaded = true;
      } else {
        getCourses(this.userId).then(data => {
          this.type = data[1];
          this.loaded = true;
        });
      }
    });
  }
};
</script>

<style lang="less" scoped>
.agreement {
  background: #ffffff;
  &:not(.readonly) {
    padding: 10px 30px;
  }
  .title {
    font-size: 32px;
    height: 100px;
    line-height: 100px;
    text-align: center;
    font-weight: bold;
    color: #000000;
  }
  .companyinfo {
    display: flex;
    padding: 10px 0;
    font-size: 30px;
    font-weight: 500;
    div:first-child {
      width: 170px;
    }
    div:last-child {
      &:not(.warn) {
        text-decoration: underline;
      }
      &.warn {
        color: red;
      }
    }
  }
  .content {
    > div {
      margin-top: 30px;
      font-size: 26px;
    }
    .box {
      border-top-left-radius: 20px;
      border-top-right-radius: 20px;
      margin: 20px 0;
      .item {
        display: flex;
        box-sizing: border-box;
        align-items: center;
        &:not(:first-child) {
          border: 1px solid #aaaaaa;
          border-top: none;
        }
        div:first-child {
          flex: 1;
          text-align: left;
          padding: 15px 0;
          padding-left: 10px;
          border-right: 1px solid #aaaaaa;
        }
        div:last-child {
          width: 200px;
          display: flex;
          align-items: center;
          justify-content: center;
        }
        &:first-child {
          border-top-left-radius: 20px;
          border-top-right-radius: 20px;
          background: #888888;
          div {
            text-align: center;
            height: 100px;
            line-height: 100px;
            color: #ffffff;
          }
        }
        .icon {
          width: 40px;
          font-size: 30px;
          color: #000;
        }
      }
    }
  }
  .sign-wrapper {
    margin-top: 150px;
    .zhang {
      display: flex;
      position: relative;
      font-size: 30px;
      font-weight: 500;
      margin-bottom: 150px;
      &:first-child::before {
        content: "";
        position: absolute;
        width: 200px;
        height: 200px;
        background: url(../assets/images/stamp.png) no-repeat center center;
        background-size: contain;
        left: 90px;
        top: -60px;
      }
      div {
        flex: 1;
      }
      .sign-btn {
        color: red;
      }
      .sign-img {
        position: absolute;
        left: 80px;
        top: 0;
        width: 115px;
        height: 50px;
      }
      .resign-btn {
        position: absolute;
        left: 80px;
        top: 50px;
        color: red;
        font-size: 28px;
      }
    }
    .sign-area {
      min-height: 260px;
      font-size: 28px;
      color: red;
      > .no-signed {
        height: 260px;
        line-height: 260px;
        text-align: center;
      }
      > .signed {
        > img {
          width: 690px;
          height: 300px;
        }
        > div {
          height: 50px;
          line-height: 50px;
          text-align: right;
          padding-right: 20px;
        }
      }
    }
  }
  .sign-pannel {
    position: fixed;
    z-index: 999;
    top: 50%;
    left: 50%;
    margin-top: -230px;
    margin-left: -345px;
    background: #fff;
    width: 690px;
    .sign-header {
      font-size: 30px;
      text-align: center;
      color: #aaa;
      line-height: 80px;
    }
    .sign-apnnel-container {
      width: 690px;
      height: 300px;
      background: rgb(241, 238, 238);
    }
    .btn-row {
      display: flex;
      height: 80px;
      color: #fff;
      font-size: 30px;
      text-align: center;
      .btn-confirm {
        flex: 1;
        height: 100%;
        line-height: 80px;
        background: rgb(85, 125, 255);
      }
      .btn-cancel {
        flex: 1;
        color: red;
        height: 100%;
        line-height: 80px;
      }
    }
  }
  .sign-pannel-mask {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: 998;
    background: rgba(0, 0, 0, 0.5);
  }
  .fade-enter-active,
  .fade-leave-active {
    transition: opacity 0.5s;
  }
  .fade-enter,
  .fade-leave-to {
    opacity: 0;
  }
  .slide-up-enter-active,
  .slide-up-leave-active {
    transition: all 0.5s;
  }
  .slide-up-enter,
  .slide-up-leave-to {
    transform: scale(0.5);
  }
  .submit-btn {
    margin: 50px auto 0;
    line-height: 100px;
    font-size: 32px;
    color: #fff;
    background: #416bea;
    text-align: center;
    border-radius: 10px;
  }
  > .contract-img {
    width: 100%;
  }
}
</style>
